<template>
  <div class="demoBox">
    <div class="first">
      <div class="menu"
           v-bind:class="{ active: isActive }">
        <div class="toggle"
             @click="toggle">
          <i class="el-icon-plus"></i>
        </div>
        <li style="--i:0">
          <a href="#"><i class="el-icon-camera"></i></a>
        </li>
        <li style="--i:1">
          <a href="#"><i class="el-icon-message-solid"></i></a>
        </li>
        <li style="--i:2">
          <a href="#"><i class="el-icon-user"></i></a>
        </li>
        <li style="--i:3">
          <a href="#"><i class="el-icon-setting"></i></a>
        </li>
        <li style="--i:4">
          <a href="#"><i class="el-icon-s-platform"></i></a>
        </li>
        <li style="--i:5">
          <a href="#"><i class="el-icon-key"></i></a>
        </li>
        <li style="--i:6">
          <a href="#"><i class="el-icon-video-camera-solid"></i></a>
        </li>
        <li style="--i:7">
          <a href="#"><i class="el-icon-s-comment"></i></a>
        </li>
      </div>
    </div>
    <div class="second">
      <div class="clock">
        <div class="hour">
          <div class="hr"
               id="hr"
               :style="{transform:hh}"></div>
        </div>
        <div class="min">
          <div class="mn"
               id="mn"
               :style="{transform:mm}"></div>
        </div>
        <div class="sec">
          <div class="sc"
               id="sc"
               :style="{transform:ss}"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      isActive: false,
      hh: '',
      mm: '',
      ss: '',
    };
  },
  watch: {},
  methods: {
    toggle () {
      this.isActive = !this.isActive
    }
  },
  created () {
    let deg = 6
    setInterval(() => {
      let day = new Date()
      let hh = day.getHours() * 30
      let mm = day.getMinutes() * deg
      let ss = day.getSeconds() * deg
      this.hh = `rotateZ(${hh + (mm / 12)}deg)`
      this.mm = `rotate(${mm}deg)`
      this.ss = `rotate(${ss}deg)`
    }, 1000)
  },
  mounted () { },
}
</script>
<style lang="less" scoped>
.demoBox {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 10px;
  .first {
    margin-bottom: 20px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 250px;
    background: linear-gradient(45deg, #8460ed, #ff1252);
    .menu {
      position: relative;
      width: 200px;
      height: 200px;
      // background: #0f0;
      display: flex;
      justify-content: center;
      align-items: center;

      li {
        position: absolute;
        list-style: none;
        left: 0;
        transform-origin: 100px;
        transition: 0.5s;
        transition-delay: calc(0.1s * var(--i));
        transform: rotate(0deg) translateX(80px);

        a {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 40px;
          height: 40px;
          background-color: #fff;
          border-radius: 50%;
          transform: rotate(calc(360deg / -8 * var(--i)));
          box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
          color: #111;
          transition: 0.5s;
        }
        a:hover {
          color: #ff1252;
        }
      }
      .toggle {
        position: absolute;
        width: 60px;
        height: 60px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
        font-size: 2em;
        transition: transform 1.25s;
      }
    }
    .active {
      .toggle {
        transform: rotate(315deg);
      }
      li {
        transform: rotate(calc(360deg / 8 * var(--i)));
      }
    }
  }
  .second {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    margin-right: 10px;
    width: 250px;
    height: 250px;
    background-color: #091921;
    .clock {
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-size: cover;
      border-radius: 50%;
      border: 3px solid #091921;
      box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
        inset 0 -15px 15px rgba(255, 255, 255, 0.05),
        0 15px 15px rgba(0, 0, 0, 0.05), inset 0 15px 15px rgba(0, 0, 0, 0.05);
      .hour {
        position: absolute;
        width: 100px;
        height: 90px;
        .hr {
          display: flex;
          justify-content: center;
          // align-items: center;
          position: absolute;
          border-radius: 50%;
          width: 100px;
          height: 90px;
        }
        .hr::before {
          content: "";
          position: absolute;
          width: 5px;
          height: 60px;
          background-color: #ff105e;
          z-index: 10;
          border-radius: 6px 6px 0 0;
        }
      }
      .min {
        position: absolute;
        width: 190px;
        height: 130px;
        .mn {
          display: flex;
          justify-content: center;
          // align-items: center;
          position: absolute;
          border-radius: 50%;
          width: 190px;
          height: 130px;
        }
        .mn::before {
          content: "";
          position: absolute;
          width: 4px;
          height: 70px;
          background-color: #fff;
          z-index: 11;
          border-radius: 6px 6px 0 0;
        }
      }
      .sec {
        position: absolute;
        width: 210px;
        height: 150px;
        .sc {
          display: flex;
          justify-content: center;
          position: absolute;
          border-radius: 50%;
          width: 210px;
          height: 150px;
        }
        .sc::before {
          content: "";
          position: absolute;
          width: 2px;
          height: 100px;
          background-color: #fff;
          z-index: 12;
          border-radius: 6px 6px 0 0;
        }
      }
    }
    .clock::before {
      content: "";
      position: absolute;
      width: 12px;
      height: 12px;
      background-color: #fff;
      border-radius: 50%;
      z-index: 10000;
    }
  }
}
</style>